/* Extras */
#extras {margin: 0 auto 3em auto; overflow: hidden;}
 
#extras ul {list-style: none; margin: 0;}
#extras li {border-bottom: 1px solid #fff;}
#extras h2 {
    color: #f89f4a;
    font-size: 1.429em;
    margin-bottom: .25em;
    padding: 0 3px;
}
 
#extras a:link, #extras a:visited {
    color: #444;
    display: block;
    border-bottom: 1px solid #F4E3E3;
    text-decoration: none;
    padding: .3em .25em;
}

#extras a:hover, #extras a:active {color: #fff; background-color: #f89f4a;}

/* Blogroll */
#extras .blogroll {
    float: left;
    width: 615px;
}

#extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}

/* Social */
#extras .social {
    float: right;
    width: 175px;
}

/*As you can see, I’m doing a 3 column layout for the blogroll block by floating
 the <li>s and a 1 column layout for the social block by merely changing its width*/

/*Now, with CSS3 :last-child selector, we will remove the border from the last 
 link on both of our blocks.*/
#extras li:last-child, /* last <li>*/
#extras li:last-child a /* <a> of last <li> */
{border: 0}

/* With :nth_last-child() CSS3, this basically targets the second (2) and third (3)
 elements starting from the end */
#extras .blogroll li:nth-last-child(2),
#extras .blogroll li:nth-last-child(3),
#extras .blogroll li:nth-last-child(2) a,
#extras .blogroll li:nth-last-child(3) a {border: 0;}

/* As expected, this will not work on IE, though IE8.js does support :last-child, 
 it does not support :nth-last-child, thus, borders will appear on IE. This is NOT
 a major design problem, information is still accessible, thus it is pointless to 
 try to achieve the same effect on IE. */


/*Now, to put an icon in every link:
    a[n] will target all <a> that has an n attribute, regardless of its value.
    a[n='b'] will target all <a> that has an n attribute value of b.
    a[n~='b'] will target all <a> that has an n attribute which one of its space-separated values is b.
    a[n^='b'] will target all <a> that has an n attribute that starts with b.
    a[n*='b'] will target all <a> that has an n attribute that has b somewhere within its value.
*/

/*You might be wondering why I’m using div[class='social'] rather than the normal 
 div.social. Simply because, for the browsers that don’t support this kind of selectors 
 (IE), we don’t want a white gap on the left of our links*/
#extras div[class='social'] a {
    background-repeat: no-repeat;
    background-position: 3px 6px;
    padding-left: 25px;
}

/* Icons */
.social a[href*='facebook.com'] {background-image: url('../images/icons/facebook.png');}
.social a[href*='/feed/'] {background-image: url('../images/icons/rss.png');}
.social a[href*='twitter.com'] {background-image: url('../images/icons/twitter.png');}